<template>
  <div class="index.vue">
    <div class="banner-box">
      <h1 class="title" style="margin-top: 0;padding-top:30px;">做招商、用京粉客招商系统</h1>
      <h3 class="desc">团长线上、线下双重招商模式全线贯通，内部、外部代理团队，层级明确、数据清晰、管理方便</h3>
      <div class="link-btn">联系微信:15238881450</div>

      <img :src="require('@/assets/imgs/banner-inner-img.png')" style="width: 1028px;height: 564px; border-radius: 8px;">
    </div>
    <div class="function-box">
      <div class="function-list">
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u169.png')">
          <div class="">活动发布</div>
          <div class="mask">
            <div class="title">活动发布</div>
            <p class="desc">母账号可为员工分配活动发布权限和活动数量，员工可以自主在系统内发布自己的活动，提升活动发布效率；</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u170.png')">
          <div class="">商品审核</div>
          <div class="mask">
            <div class="title">商品审核</div>
            <p class="desc">员工自己可在招商系统内完成阿里妈妈商品审核，无需登录阿里妈妈账号，保障数据安全性</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u171.png')">
          <div class="">佣金监控</div>
          <div class="mask">
            <div class="title">佣金监控</div>
            <p class="desc">系统会不断扫描推广进行中商品佣金变化情况，及时提醒佣金出现变化的商品，防止同行恶意敲单行为</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u172.png')">
          <div class="">订单管理</div>
          <div class="mask">
            <div class="title">订单管理</div>
            <p class="desc">付款订单明细实时更新，精准统计助力数据化运营，系统概况可直观查看每小时销量趋势图标，精准管理每笔订单；</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u173.png')">
          <div class="">成交排行</div>
          <div class="mask">
            <div class="title">成交排行</div>
            <p class="desc">商品排名、员工排名、团队排名、员工或管理员能清晰的实时的知道自己那个商品爆单了，那个员工和团队的排名情况</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u174.png')">
          <div class="">绩效管理</div>
          <div class="mask">
            <div class="title">绩效管理</div>
            <p class="desc">管理员能清晰的知道，员工每天，每周、每月招了多少个商品，成交了多少单，跑的比较好的商品有哪些，最后一次登录IP地址；</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u175.png')">
          <div class="">工资计算</div>
          <div class="mask">
            <div class="title">工资计算</div>
            <p class="desc">系统自动核算每位员工的团长工资结算数据，将每一笔结算订单都归属到人头，数据精准度达100%</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u176.png')">
          <div class="">虚拟截图</div>
          <div class="mask">
            <div class="title">虚拟截图</div>
            <p class="desc">虚拟截图小工具，员工可通过这个工具做数据成交相关图片，便于员工洽谈商家促成合作</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u177.png')">
          <div class="">一键上架</div>
          <div class="mask">
            <div class="title">一键上架</div>
            <p class="desc">推广专员可以将符合各个推广平台的商品，通过系统一键上架到对应的平台上去，提升上单效率</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u178.png')">
          <div class="">渠道管理</div>
          <div class="mask">
            <div class="title">渠道管理</div>
            <p class="desc">系统可自由添加外部合作渠道，自动统计外部渠道合作费用，渠道管理一目了然，便于成本控制和商品推广</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u179.png')">
          <div class="">商机推荐</div>
          <div class="mask">
            <div class="title">商机推荐</div>
            <p class="desc">系统提供了，超级搜索、每日精选、平台榜单、独家资源、换券商机等供招商专员招商</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u180.png')">
          <div class="">商家采集</div>
          <div class="mask">
            <div class="title">商家采集</div>
            <p class="desc">市场商家联系方式采集功能，可将采集回来的商家自由分配给员工进行谈单，员工也可自己通过招商插件采集商家联系方式</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u181.png')">
          <div class="">财务管理</div>
          <div class="mask">
            <div class="title">财务管理</div>
            <p class="desc">系统支持财务角色进入，招商专员的线下结算数据，财务审核通过后才可进入结算，提高财务回款安全性</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u182.png')">
          <div class="">外部代理合作</div>
          <div class="mask">
            <div class="title">外部代理合作</div>
            <p class="desc">系统支持代理合作模式，分公司、子公司、小组管理权限清晰明了，数据相互不干扰，权限分配自由控制</p>
          </div>
        </div>
        <div class="function-list-item">
          <img class="img" :src="require('@/assets/imgs/u183.png')">
          <div class="">线下招商</div>
          <div class="mask">
            <div class="title">线下招商</div>
            <p class="desc">系统支持、线下服务费结算模式，从传单，到推广、到结算打款、财务审核，一套完善的推广结束流程</p>
          </div>
        </div>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
  import footerbox from '@/components/footerbox.vue'
export default {
  name: 'IndexVue',
   components: {
      footerbox,
    },
  data () {
    return {

    }
  },

  computed: {

  },
  created() {

  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang='less' scoped>
.pointer {
  cursor: pointer;
}
.breakTxt {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wordBreak {
  word-break: break-all;
  word-wrap: break-word;
}
.maskBtnHover {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  filter: alpha(opacity=100);
  opacity: 1;
}
#btp-header {
  position: inherit;
  background-color: #09122B;
}
.banner-box {
  box-sizing: border-box;
  background: url("~@/assets/imgs/banner.png") no-repeat;
  background-size: 100%;
  height: 860px;
  text-align: center;
  color: #fff;
}
.banner-box .title {
  font-size: 40px;
}
.banner-box .desc {
  font-size: 18px;
  margin: 30px 0;
}
.banner-box .link-btn {
  display: block;
  margin: 0 auto 20px;
  text-decoration: none;
  color: #BB3CEB;
  background: #fff;
  font-size: 18px;
  width: 247px;
  height: 54px;
  line-height: 54px;
  border-radius: 100px;
}
.function-box {
  background: #f2f4fa;
}
.function-box .function-list {
  width: 1028px;
  margin: auto;
  font-size: 0;
  padding: 160px 0 30px;
}
.function-box .function-list-item {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  background: #fff;
  width: 180px;
  height: 180px;
  margin-right: 32px;
  margin-bottom: 32px;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding-top: 42px;
  font-size: 14px;
  border-radius: 3px;
}
.function-box .function-list-item:nth-child(5n) {
  margin-right: 0;
}
.function-box .function-list-item .img {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}
.function-box .function-list-item .mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 300px;
  bottom: 0;
  background: #2461ff;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  transition: all 0.3s ease;
}
.function-box .function-list-item .mask .title {
  padding: 5px 0 15px;
  position: relative;
}
.function-box .function-list-item .mask .title:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  background: #fff;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}
.function-box .function-list-item .mask .desc {
  text-align: left;
  word-break: break-all;
}
.function-box .function-list-item:hover .mask {
  top: 0;
}
.notice-list {
  max-width: 1300px;
}
.notice-list .download {
  width: 160px;
  height: 40px;
  line-height: 40px;
  background: #2d8cf0;
  box-shadow: 0 6px 15px 0 #abd4ff;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin-top: 24px;
  text-align: center;
}
.notice-list .download:hover {
  opacity: 0.9;
}
.notice-list .notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0;
  position: relative;
}
.notice-list .notice-item:nth-child(odd) {
  flex-direction: row-reverse;
}
.notice-list .notice-item .title {
  font-size: 24px;
  font-weight: 600;
  position: relative;
  margin-bottom: 30px;
}
.notice-list .notice-item .title span {
  color: #2461FF;
  position: relative;
  z-index: 9;
}
.notice-list .notice-item .title .letter {
  position: absolute;
  font-weight: bold;
  font-size: 120px;
  line-height: 0.8;
  color: #f2f6ff;
  left: 0;
  bottom: 0;
  z-index: 0;
}
.notice-list .notice-item img {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(36, 97, 255, 0.6);
}
.notice-list .notice-item .desc {
  position: relative;
  padding-left: 30px;
  color: #333;
  font-size: 18px;
  font-weight: 650;
  margin-top: 20px;
}
.notice-list .notice-item .desc:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  border: 1px solid #fff;
  width: 15px;
  height: 15px;
  background: #2461ff;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
}

</style>
